<template>
  <div class="indexAnalysis-container">
    <van-nav-bar title="下钻分析" left-arrow @click-left="onClickLeft" @click-right="onClickRight" v-if="!$isDD" />

    <div :class="!$isDD ? 'indexAnalysisData_container' : ''">
      <detailData
        :data="defineData"
        @getIndex="handleIndex"
        :operation="operation"
        @indexModifyPopup="handleModifyPopup"
      ></detailData>
      <detailPopup
        :isShowPopup="isShowPopup"
        @closeDetailPup="handleCloseDetailPup"
        @overLappingPuPDetermine="handleOverLappingPuPDetermine"
        @drilldownPuPDetermine="handleDrilldownPuPDetermine"
        :overlapingItem="overlapingItem"
        :fields="fields"
        :pupValue="pupValue"
        :dataContent="dataContent"
        v-bind:modifyPup.sync="modifyPup"
      ></detailPopup>
    </div>
  </div>
</template>

<script>
import { getDetailData, getDimOptionsData } from '@/api/user'
import detailData from './detailData.vue'
import detailPopup from './detailPopup.vue'
import { get } from 'lodash'
export default {
  data() {
    return {
      isShowPopup: false, // 是否展示弹窗
      dataContent: [], // 交叉存储数据数组。最后一个赋值给defineData展示
      defineData: {}, // 交叉展示数据
      overlapingItem: {}, // 列表点击单个数据
      fields: [],
      pupValue: [], // 弹窗选择列表
      querUrlArr: [],
      dateType: '', // 时间过滤
      topic: '', // 指标
      code: '', // code
      targetCode: '',
      homeId: '',
      operation: 'drill',
      filterData: [],
      refCodeData: [],
      modifyPup: 0
    }
  },
  components: {
    detailData,
    detailPopup
  },
  created() {
    console.log('wellcome to indexAnalysis.')
    if (this.$isDD) {
      this.$dd.ready(() => {
        this.$dd.biz.navigation.setTitle({
          title: '详情页面',
          onSuccess: result => {
            console.log('导航栏设置成功')
          },
          onFail: err => {
            console.log(err)
          }
        })

        if (this.$dd.android) {
          document.addEventListener('backbutton', e => {
            // 安卓调用方式
            e.preventDefault() // 阻止返回
            // 在这里处理你的业务
            this.dataCtl()
          })
        } else {
          this.$dd.biz.navigation.setLeft({
            control: true,
            text: '',
            onSuccess: result => {
              // IOS调用方法 ios返回不起作用，需要手动让他返回window.history.go(-1)
              this.dataCtl()
            },
            onFail(err) {
              console.log('返回失败', err)
            }
          })
        }
      })
    }
  },
  mounted() {
    this.getqueryUrl()
    this.operation = 'drill'
    this.getDetailData({
      dateType: this.dateType,
      topic: this.topic,
      id: this.homeId,
      operation: 'drill',
      targetCode: this.targetCode,
      filters: [],
      fields: [
        {
          code: 'mkt_org_branch',
          name: '分公司',
          order: 0,
          role: 'dim',
          value: 'mkt_org_branch_name'
        }
      ]
    })
  },
  methods: {
    handleIndex(data, overlapingItem, filterData) {
      // 获取单个列表信息
      this.isShowPopup = data
      this.overlapingItem = overlapingItem
      this.refCodeData = filterData
      this.getPupOptionData()
    },
    handleModifyPopup(isPopup) {
      this.isShowPopup = isPopup
      this.modifyPup = 3
      this.getPupOptionData()
      console.log(this.filterData, 'filterData')
    },
    handleCloseDetailPup(data) {
      this.isShowPopup = data
      this.modifyPup = 0
    },
    getqueryUrl() {
      const { dateType, topic, targetCode, id } = this.$route.query
      this.dateType = dateType
      this.topic = topic
      this.targetCode = targetCode
      this.homeId = id
    },
    onClickLeft() {
      this.dataCtl()
    },
    dataCtl() {
      if (this.dataContent.length > 1) {
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true
        })
        setTimeout(() => {
          this.dataContent.pop()
          this.filterData.pop()
          this.defineData = this.dataContent[this.dataContent.length - 1]
          this.$toast.clear()
        }, 600)
      } else {
        // 当前页面返回方式
        // isAndroid || !this.$isDD ? this.$router.go(-1) : window.history.go(-1)
        // 打开新的页面关闭方式
        this.handleClose()
      }
    },
    handleClose() {
      if (this.$isDD) {
        this.$dd.ready(() => {
          this.$dd.biz.navigation.close({
            onSuccess: result => {
              /**/
              console.log('通过dd.biz.util.close关闭当前页面！', result)
            },
            onFail: err => {
              console.log(err)
            }
          })
        })
      } else {
        this.$router.back()
      }
    },
    trackButton() {
      // Toast.success('追踪成功')
    },
    onClickRight() {},
    handleOverLappingPuPDetermine(isClose, activeId) {
      // 交叉
      this.operation = 'pivot'
      this.isShowPopup = isClose
      this.modifyPup = 0
      for (let i = 0; i < this.refCodeData.length; i++) {
        this.filterData.push({ code: this.refCodeData[i], value: this.overlapingItem.[this.refCodeData[i]] })
      }
      this.getDetailData({
        fields: activeId,
        filters: this.filterData,
        dateType: this.dateType,
        operation: 'pivot', // 交叉
        topic: this.topic, // 首页
        id: this.homeId,
        targetCode: this.targetCode
      })
    },
    handleDrilldownPuPDetermine(isClose, activeId) {
      // 下钻
      this.isShowPopup = isClose
      this.operation = 'drill'
      this.modifyPup = 0
      for (let i = 0; i < this.refCodeData.length; i++) {
        this.filterData.push({ code: this.refCodeData[i], value: this.overlapingItem.[this.refCodeData[i]] })
      }
      this.getDetailData({
        fields: activeId,
        filters: this.filterData,
        dateType: this.dateType,
        operation: 'drill', // 下钻
        topic: this.topic, // 首页
        id: this.homeId,
        targetCode: this.targetCode
      })
    },
    async getDetailData(parmas) {
      const res = await getDetailData(parmas)
      if (res.errorCode === '0' && res.success === true) {
        try {
          const value = get(res, 'value', {})
          const fields = get(value, 'fields', [])
          this.fields = fields
          this.dataContent.push(res.value)
          this.defineData = this.dataContent[this.dataContent.length - 1]
        } catch (err) {
          console.log(err)
        }
      } else {
        this.dataContent.push({})
      }
    },
    async getPupOptionData() {
      const res = await getDimOptionsData({ source: this.topic })
      if (res.errorCode === '0' && res.success === true) {
        try {
          const value = get(res, 'value', [])
          this.pupValue = value
          this.pupValue.map(item => {
            item.text = item.dimName
            item.id = item.dimCode
            item.children = item.childValue
            item.children.map(child => {
              child.text = child.name
              child.id = child.value
            })
          })
        } catch (err) {
          console.log(err)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.indexAnalysisData_container {
  margin-top: 61px;
}
/deep/.van-sidebar-item--select::before {
  background-color: #fff;
}
.indexAnalysis-container {
  display: block;
  .loading {
    position: fixed;
    top: 50%;
    left: 50%;
  }
  /deep/.van-nav-bar__content {
    background-color: rgba(10, 13, 60, 1);
    position: fixed;
    top: 0px;
    width: 375px;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar {
    background-color: transparent;
  }
  /deep/.van-hairline--bottom::after {
    visibility: hidden;
  }
  /deep/.van-button--plain {
    background: #0f3792;
    border: none;
  }
  /deep/.van-button--default {
    color: #fff;
  }
}
</style>
